<template>
    <div class="grossContainer">
        <div class="item">

            <el-upload :action="attachmentUploadUrl" :accept="attachmentTip" :before-upload="beforeAttachmentUpload"
                :on-success="attachmentUploaded" :before-remove="beforeRemove" :on-remove="fileRemoved">
                <el-button size="small" type="primary">上传数字切片</el-button>
                <!-- <div slot="tip" class="el-upload__tip">{{ attachmentTip }}</div> -->
            </el-upload>

        </div>
        <div class="slicingTitleContainer">
            <el-row :gutter="device === 'mobile' ? 10 : 20">
                <el-col :xs='12' :sm="8" :md="6" :lg="6" :xl="6" v-for="(item, index) in slicingData"
                    :key="item.scannerSerialNumber">
                    <el-card :body-style="{ padding: '0px' }" class="cardDiv">
                        <div @click="exclude(item)">
                            <img :src="getImgUrl(item.labelUrl)" class="image">
                            <div class="slicingTitle_bottom">
                                <div class="slicingTitle">
                                    <div class="slicingTitle_title">扫描号</div>
                                    <div class="slicingTitle_dec active">{{ item.scannerSerialNumber }}</div>
                                </div>
                                <div class="slicingTitle">
                                    <div class="slicingTitle_title">扫描员</div>
                                    <div class="slicingTitle_dec">{{ item.createUserName }}</div>
                                </div>
                                <div class="slicingTitle">
                                    <div class="slicingTitle_title">扫描倍率</div>
                                    <div class="slicingTitle_dec">{{ item.level }}</div>
                                </div>
                                <div class="slicingTitle">
                                    <div class="slicingTitle_title">扫描时间</div>
                                    <div class="slicingTitle_dec">{{ item.updateTime }}</div>
                                </div>
                                <div class="slicingTitle">
                                    <div class="slicingTitle_title">上传时间</div>
                                    <div class="slicingTitle_dec">{{ item.createTime }}</div>
                                </div>

                            </div>
                        </div>

                    </el-card>
                </el-col>
            </el-row>
        </div>


    </div>
</template>

<script>


export default {
    name: 'digitalSlicing',
    props: {
        digitalSlicingData: {
            type: Object,
            default: {},
        },
        pathologyId: { //病例id
            type: [String, Number],
            default: '',
        },
        diagnosisId: { //诊断id
            type: [String, Number],
            default: '',
        },
    },
    data() {
        return {
            remark: '',
            imageServiceURL: process.env.VUE_APP_ImageServiceURL, // 图片服务器地址
            DicomPreviewURL: process.env.VUE_APP_dicomViewerURL, // diocm查看地址
            attachmentUploadUrl: `${process.env.VUE_APP_ImageServiceURL}/upload`,
            dicomUploadUrl: `${process.env.VUE_APP_dicomUploadURL}/dicom-upload`,
            attachmentTip: '*(支持 .jpeg/.png/.gif 等格式的文件)',
            attachmentAccept: 'image/gif,image/jpeg,image/png',
            slicingData: [],//切片集合
        };
    },
    computed: {
        device() {
            return this.$store.state.device
        }
    },
    mounted() {
        console.log("数据————————————")
        console.log(this.digitalSlicingData)
        this.slicingData = this.digitalSlicingData.biopsyList
    },
    methods: {
        getImgUrl(url) {
            return this.imageServiceURL + url
        },
        exclude(val) {
            const { state } = this.$store;
            const { href } = this.$router.resolve({
                name: 'Viewer',
                path: '/Viewer',
                query: {
                    fileName: val.newFilename,
                    originFilename: val.originFilename,
                    pathologyId: this.pathologyId,
                    biopsyId: val.id,
                    authorization: state.authorization,
                    userId: state.user.id,
                    pDiagnosisType: sessionStorage.getItem('pDiagnosisType'),
                },
            });
            const width = window.screen.availWidth + 10;
            const height = window.screen.availHeight + 10;
            window.open(
                href,
                'doctorWorkstation',
                `location=no,width=${width},height=${height}`
            );
        },

        beforeAttachmentUpload(file) {
            const isGIF = file.type === 'image/gif';
            const isJPEG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isPDF = file.type === 'application/pdf';

            if (!isGIF && !isJPEG && !isPNG && !isPDF) {
                this.$message.warning('文件格式不正确！');
                return false;
            }

            if (this.slicingData.find((item) => item.description === file.name)) {
                this.$message.warning('文件名重复！');
                return false;
            }
            return true;
        },
        async attachmentUpload(file) {
            const attachment = file;
            try {
                await this.$axios({
                    method: 'POST',
                    url: '/attachment',
                    data: attachment,
                }).then((res) => {
                    if (res.data.code === 200) {
                        console.log('upload success', res.data);
                        attachment.id = res.data.data.id;
                        this.slicingData.push(attachment);
                    }
                });
            } catch (e) {
                throw new Error(e);
            }
        },
        async attachmentRemove(attachmentId) {
            // try {
            //     await this.$axios({
            //         method: 'DELETE',
            //         url: `/attachment/${attachmentId}`,
            //     }).then((res) => {
            //         if (res.data.code === 200) {
            //             console.log('delete success');
            //         }
            //     });
            // } catch (e) {
            //     throw new Error(e);
            // }
        },

        attachmentUploaded(file) {
            const item = {
                description: file.name,
                type: 1,
                url: file.url,
            };
            if (this.diagnosisId !== 0) {
                //item.diagnosisId = this.diagnosisId;
                //   this.attachmentUpload(item);
            } else {
                this.slicingData.push(item);
            }
        },

        attachmentPreview(file) {
            const width = window.screen.availWidth + 10;
            const height = window.screen.availHeight + 10;
            window.open(file.url, '_blank', `location=no,width=${width},height=${height}`);
        },
        beforeRemove(file) {
            if (file && file.status === 'success') {
                return this.$confirm(`确定移除 ${file.name}？`);
            }
            return true;
        },
        fileRemoved(file) {
            if (file && file.status === 'success') {
                _.remove(
                    this.slicingData,
                    (item) =>
                        item.description === file.name &&
                        item.type === file.type
                );
                if (this.diagnosisId !== 0) {
                    this.attachmentRemove(file.id);
                }
            }
        },
    },
};
</script>

<style scoped>
.item {
    margin-top: 10px;
    position: relative;
    padding-top: 30px;
}


.slicingTitleContainer {
    margin-top: 30px;
}

.grossContainer .item ::v-deep .el-upload {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 32px;
    width: auto;
    line-height: 32px;
    border: none;
}

::v-deep .el-upload-list__item-thumbnail {
    object-fit: cover;
}

::v-deep .el-upload__tip {
    position: absolute;
    top: 0px;
    left: 150px;
    height: 32px;
    line-height: 32px;
    margin-top: 0px;
    color: red;
}



.slicingTitle {
    font-size: 14px;
    word-wrap: break-word;
    display: flex;
}

.slicingTitle_title {
    width: 70px;
    font-size: 14px;
    font-weight: 700;
}

.slicingTitle_bottom {
    padding: 12px;
}

.slicingTitle_dec {
    width: calc(100% - 70px);
    color: #666;
    line-height: 20px;
}

.slicingTitle_dec.active {
    color: red;
}

.cardDiv {
    margin-bottom: 10px;
}


.image {
    width: 100%;
    display: block;
}
</style>
